<template>
  <div class="app-container">
    <part-comp title="提现" class="mb_15"/>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox whitebg m_20 mb_15">
        <!-- <el-form-item label="姓名：" prop="name">
            <el-input v-model="queryParams.name" style="width:136px"
                placeholder="请输入姓名"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item> -->
        <el-form-item label="用户名:" prop="uid">
            <el-select v-model="queryParams.uid" size="small" clearable placeholder="用户名" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in userList"
                    :key="dict.id"
                    :label="dict.user_login"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="手机号：" prop="username">
            <el-input v-model="queryParams.username" style="width:136px"
                placeholder="请输入手机号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="状态:" prop="type">
            <el-select v-model="queryParams.type" size="small" clearable placeholder="状态" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in stausList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="支付时间:">
            <el-date-picker size="small"
                v-model="activeTimes"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="tablebox whitebg m_20">
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable">
            <el-table-column label="序号" prop="id" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名">
                <template slot-scope="scope">
                    <span class="">{{scope.row.userinfo?scope.row.userinfo.name:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.resource?scope.row.resource.user_login:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.userinfo?scope.row.userinfo.phone:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付账号" prop="user_login" >
                <template slot-scope="scope">
                    <span class="">{{scope.row.userinfo?scope.row.userinfo.account||'-':'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付时间">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time}}</span>
                    <!-- <span v-if="scope.row.his_saleObj">{{levelName(scope.row.active_level)||'-'}}</span>
                    <span v-else>{{levelName(scope.row.active_level)||'-'}}</span> -->
                </template>
            </el-table-column>
            <!-- <el-table-column label="完成单量">
                <template slot-scope="scope">
                    <span >{{ scope.row.title}}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="应支付金额">
                <template slot-scope="scope">
                    <span >{{ scope.row.coin}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <!-- primarydot :class="scope.row.check_name=='审核成功'?'':'reddot'" -->
                   <div><span class="" ></span>{{scope.row.status_name}}</div>
                   <!-- <div v-else><span class="primarydot reddot"></span>禁用</div> -->
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="操作"  fixed="right" width="100">
                <template slot-scope="scope">
                    <div class="flex btnflex">
                        <div class="commhover btn_textblue mb_10" @click="handleDetail(scope.row)">查看</div>
                        <span v-if="scope.row.status==0" class="line">|</span>
                        <div v-if="scope.row.status==0" class="commhover btn_textblue mb_10" @click="handlePay(scope.row)">支付</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
    <el-drawer title="查看" class="mydrawercontent" :visible.sync="detaildialog" direction="rtl"
       size='40%' :before-close="handleCloseDetail">
        <pay-detail v-if="detaildialog" :rowinfo="rowinfo" @close='handleCloseDetail' />
    </el-drawer>

    <el-drawer title="支付" class="mydrawercontent" :visible.sync="paydialog" direction="rtl"
       size='40%' :before-close="handleClosePay">
        <pay-withdrawal v-if="paydialog" @close='handleClosePay' :rowinfo='payitem' />
    </el-drawer>
  </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import PayDetail from './components/PayDetail.vue';
import PayWithdrawal from './components/PayWithdrawal.vue';
import { getpayList } from '@/api/message'
export default {
    components:{
        PayDetail,
        PayWithdrawal,
        PartComp
    },
    data(){
        return {
            queryParams:{
                page:1,
                num:10,
                name:'',
                account:''
            },
            listLoading:false,
            list:[],
            total:0,
            userList:[],
            stausList:[{name:'未支付',id:0},{name:'已支付',id:1},{name:'支付失败',id:4},],
            activeTimes:[],
            detaildialog:false,
            rowinfo:null,
            paydialog:false,
            type:1,
            payitem:null,
        }
    },

    created(){
        // 用户列表
        this.getDicts('/check/user/userlist').then(res=>{
            this.userList = res.data;
        });
        this.getList();
    },

    computed: {

        levelName(){
            return levelName
        },
    },

    methods:{

        getList(){
            this.listLoading=true;
            let params = {
                page:this.queryParams.page,
                num:this.queryParams.num,
            }
            if(this.queryParams.uid){
                params.uid = this.queryParams.uid
            }
            if(this.queryParams.name){
                params.name = this.queryParams.name
            }
            if(this.queryParams.username){
                params.username = this.queryParams.username
            }
            // if(this.queryParams.account){
            //     params.account = this.queryParams.account
            // }
            if(this.queryParams.type||this.queryParams.type==0){
                params.type = this.queryParams.type
            }
            if(this.activeTimes&&this.activeTimes.length){
                params.startime=this.activeTimes[0];
                params.endtime=this.activeTimes[1];
            }
            getpayList(params).then(res=>{
                this.listLoading=false;
                this.list = res.data.list;
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading=false;
            })
        },

        handleQuery(){
            this.queryParams.page = 1;
            this.getList();
        },

        resetQuery(){
            this.resetForm("queryForm");
            this.activeTimes=[];
            this.handleQuery();
        },
        
        // 查看详情
        handleDetail(row){
            this.rowinfo=row;
            this.detaildialog = true;
        },


        handleCloseDetail(type){
            // if(type==1){
            //     this.getList();
            // }
            this.detaildialog = false
        },


        handlePay(row){
            this.payitem = row;
            this.paydialog=true;
        },

        handleClosePay(type){
            if(type==1){
                this.getList();
            }
            this.paydialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
.formbox{
    border-radius: 5px;
    padding: 15px 15px 0 15px;
    .el-form-item{
        margin-bottom: 5px;
    }
}
.primarydot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background-color: #1168EB;
}
.reddot{
  background-color: #E63737;
}
.btnflex{
    .line{
        display: inline-block;
        margin:0 10px;
    }
}
</style>